export default {
  id: {
    desc: "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n",
  },
  show: {
    desc: "\n\n<p>是否显示标题组件。</p>\n",
    uiControl: { type: "boolean", default: "true" },
  },
  text: {
    desc: '\n\n<p>主标题文本，支持使用 <code class="codespan">\\n</code> 换行。</p>\n',
    uiControl: { type: "text" },
  },
  link: { desc: "<p>主标题文本超链接。</p>\n" },
  target: {
    desc: '<p>指定窗口打开主标题超链接。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p><code class="codespan">&#39;self&#39;</code> 当前窗口打开</p>\n</li>\n<li><p><code class="codespan">&#39;blank&#39;</code> 新窗口打开</p>\n</li>\n</ul>\n',
  },
  "textStyle.color": {
    desc: "\n\n<p>主标题文字的颜色。</p>\n",
    uiControl: { type: "color", default: "'#333'" },
  },
  "textStyle.fontStyle": {
    desc: '\n\n<p>主标题文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;normal&#39;</code></li>\n<li><code class="codespan">&#39;italic&#39;</code></li>\n<li><code class="codespan">&#39;oblique&#39;</code></li>\n</ul>\n',
    uiControl: {
      type: "enum",
      default: "normal",
      options: "normal,italic,oblique",
    },
  },
  "textStyle.fontWeight": {
    desc: '\n\n<p>主标题文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;normal&#39;</code></li>\n<li><code class="codespan">&#39;bold&#39;</code></li>\n<li><code class="codespan">&#39;bolder&#39;</code></li>\n<li><code class="codespan">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n',
    uiControl: {
      type: "enum",
      default: "normal",
      options: "normal,bold,bolder,lighter",
    },
  },
  "textStyle.fontFamily": {
    desc: "\n\n<p>主标题文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
    uiControl: {
      type: "enum",
      default: "sans-serif",
      options: "sans-serif,serif,monospace,Arial,Courier New",
    },
  },
  "textStyle.fontSize": {
    desc: "\n\n<p>主标题文字的字体大小。</p>\n",
    uiControl: { type: "number", default: "18", min: "1", step: "1" },
  },
  "textStyle.lineHeight": {
    desc: '\n\n<p>行高。</p>\n<p><code class="codespan">rich</code> 中如果没有设置 <code class="codespan">lineHeight</code>，则会取父层级的 <code class="codespan">lineHeight</code>。例如：</p>\n<pre><code class="lang-ts">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n        }\n    }\n}\n</code></pre>\n',
    uiControl: { type: "number", min: "0", step: "1", default: "12" },
  },
  "textStyle.width": {
    desc: "\n\n<p>文本显示宽度。</p>\n",
    uiControl: {
      type: "number",
      default: "100",
      min: "1",
      max: "500",
      step: "1",
    },
  },
  "textStyle.height": {
    desc: "\n\n<p>文本显示高度。</p>\n",
    uiControl: {
      type: "number",
      default: "50",
      min: "1",
      max: "500",
      step: "1",
    },
  },
  "textStyle.textBorderColor": {
    desc: "\n\n<p>文字本身的描边颜色。</p>\n",
    uiControl: { type: "color" },
  },
  "textStyle.textBorderWidth": {
    desc: "\n\n<p>文字本身的描边宽度。</p>\n",
    uiControl: { type: "number", min: "0", step: "0.5" },
  },
  "textStyle.textBorderType": {
    desc: '\n\n\n<p>文字本身的描边类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;solid&#39;</code></li>\n<li><code class="codespan">&#39;dashed&#39;</code></li>\n<li><code class="codespan">&#39;dotted&#39;</code></li>\n</ul>\n<p>自 <code class="codespan">v5.0.0</code> 开始，也可以是 <code class="codespan">number</code> 或者 <code class="codespan">number</code> 数组，用以指定线条的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray" target="_blank">dash array</a>，配合 \n<code class="codespan">textBorderDashOffset</code>\n 可实现更灵活的虚线效果。</p>\n<p>例如：</p>\n<pre><code class="lang-ts">{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n</code></pre>\n',
    uiControl: {
      type: "enum",
      default: "solid",
      options: "solid,dashed,dotted",
    },
  },
  "textStyle.textBorderDashOffset": {
    desc: '<blockquote>\n<p>从 <code class="codespan">v5.0.0</code> 开始支持</p>\n</blockquote>\n\n\n<p>用于设置虚线的偏移量，可搭配 \n<code class="codespan">textBorderType</code>\n 指定 dash array 实现灵活的虚线效果。</p>\n<p>更多详情可以参考 MDN <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset" target="_blank">lineDashOffset</a>。</p>\n',
    uiControl: { type: "number", min: "0", step: "1", default: "0" },
  },
  "textStyle.textShadowColor": {
    desc: "\n\n<p>文字本身的阴影颜色。</p>\n",
    uiControl: { type: "color", default: "#000" },
  },
  "textStyle.textShadowBlur": {
    desc: "\n\n<p>文字本身的阴影长度。</p>\n",
    uiControl: { type: "number", min: "0", step: "0.5" },
  },
  "textStyle.textShadowOffsetX": {
    desc: "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
    uiControl: { type: "number", step: "0.5" },
  },
  "textStyle.textShadowOffsetY": {
    desc: "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
    uiControl: { type: "number", step: "0.5" },
  },
  "textStyle.overflow": {
    desc: '\n\n<p>文字超出宽度是否截断或者换行。配置<code class="codespan">width</code>时有效</p>\n<ul>\n<li><code class="codespan">&#39;truncate&#39;</code> 截断，并在末尾显示<code class="codespan">ellipsis</code>配置的文本，默认为<code class="codespan">...</code></li>\n<li><code class="codespan">&#39;break&#39;</code> 换行</li>\n<li><code class="codespan">&#39;breakAll&#39;</code> 换行，跟<code class="codespan">&#39;break&#39;</code>不同的是，在英语等拉丁文中，<code class="codespan">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n',
    uiControl: { type: "enum", options: "truncate,break,breakAll" },
  },
  "textStyle.ellipsis": {
    desc: '<p>在<code class="codespan">overflow</code>配置为<code class="codespan">&#39;truncate&#39;</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n',
  },
  "textStyle.rich": {
    desc: '<p>在 <code class="codespan">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class="lang-ts">label: {\n    // 在文本中，可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号：\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意，换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程：<a href="tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE" target="_blank">富文本标签</a></p>\n',
  },
  "textStyle.rich.<style_name>.color": {
    desc: "\n\n<p>文字的颜色。</p>\n",
    uiControl: { type: "color", default: "null" },
  },
  "textStyle.rich.<style_name>.fontStyle": {
    desc: '\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;normal&#39;</code></li>\n<li><code class="codespan">&#39;italic&#39;</code></li>\n<li><code class="codespan">&#39;oblique&#39;</code></li>\n</ul>\n',
    uiControl: {
      type: "enum",
      default: "normal",
      options: "normal,italic,oblique",
    },
  },
  "textStyle.rich.<style_name>.fontWeight": {
    desc: '\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;normal&#39;</code></li>\n<li><code class="codespan">&#39;bold&#39;</code></li>\n<li><code class="codespan">&#39;bolder&#39;</code></li>\n<li><code class="codespan">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n',
    uiControl: {
      type: "enum",
      default: "normal",
      options: "normal,bold,bolder,lighter",
    },
  },
  "textStyle.rich.<style_name>.fontFamily": {
    desc: "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
    uiControl: {
      type: "enum",
      default: "sans-serif",
      options: "sans-serif,serif,monospace,Arial,Courier New",
    },
  },
  "textStyle.rich.<style_name>.fontSize": {
    desc: "\n\n<p>文字的字体大小。</p>\n",
    uiControl: { type: "number", default: "12", min: "1", step: "1" },
  },
  "textStyle.rich.<style_name>.align": {
    desc: '\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;left&#39;</code></li>\n<li><code class="codespan">&#39;center&#39;</code></li>\n<li><code class="codespan">&#39;right&#39;</code></li>\n</ul>\n<p><code class="codespan">rich</code> 中如果没有设置 <code class="codespan">align</code>，则会取父层级的 <code class="codespan">align</code>。例如：</p>\n<pre><code class="lang-ts">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`，则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n',
    uiControl: { type: "enum", options: "left,center,right" },
  },
  "textStyle.rich.<style_name>.verticalAlign": {
    desc: '\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;top&#39;</code></li>\n<li><code class="codespan">&#39;middle&#39;</code></li>\n<li><code class="codespan">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class="codespan">rich</code> 中如果没有设置 <code class="codespan">verticalAlign</code>，则会取父层级的 <code class="codespan">verticalAlign</code>。例如：</p>\n<pre><code class="lang-ts">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n',
    uiControl: { type: "enum", options: "top,middle,bottom" },
  },
  "textStyle.rich.<style_name>.lineHeight": {
    desc: '\n\n<p>行高。</p>\n<p><code class="codespan">rich</code> 中如果没有设置 <code class="codespan">lineHeight</code>，则会取父层级的 <code class="codespan">lineHeight</code>。例如：</p>\n<pre><code class="lang-ts">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n        }\n    }\n}\n</code></pre>\n',
    uiControl: { type: "number", min: "0", step: "1", default: "12" },
  },
  "textStyle.rich.<style_name>.backgroundColor": {
    desc: '\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class="codespan">&#39;#123234&#39;</code>, <code class="codespan">&#39;red&#39;</code>, <code class="codespan">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class="lang-ts">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL，\n    // 或者图片的 dataURI，\n    // 或者 HTMLImageElement 对象，\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class="codespan">width</code> 或 <code class="codespan">height</code> 指定高宽，也可以不指定自适应。</p>\n',
    uiControl: { type: "color", default: "#fff" },
  },
  "textStyle.rich.<style_name>.borderColor": {
    desc: "\n\n<p>文字块边框颜色。</p>\n",
    uiControl: { type: "color", default: "#fff" },
  },
  "textStyle.rich.<style_name>.borderWidth": {
    desc: "\n\n<p>文字块边框宽度。</p>\n",
    uiControl: { type: "number", min: "0", step: "0.5" },
  },
  "textStyle.rich.<style_name>.borderType": {
    desc: '\n\n\n<p>文字块边框描边类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;solid&#39;</code></li>\n<li><code class="codespan">&#39;dashed&#39;</code></li>\n<li><code class="codespan">&#39;dotted&#39;</code></li>\n</ul>\n<p>自 <code class="codespan">v5.0.0</code> 开始，也可以是 <code class="codespan">number</code> 或者 <code class="codespan">number</code> 数组，用以指定线条的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray" target="_blank">dash array</a>，配合 \n<code class="codespan">borderDashOffset</code>\n 可实现更灵活的虚线效果。</p>\n<p>例如：</p>\n<pre><code class="lang-ts">{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n</code></pre>\n',
    uiControl: {
      type: "enum",
      default: "solid",
      options: "solid,dashed,dotted",
    },
  },
  "textStyle.rich.<style_name>.borderDashOffset": {
    desc: '<blockquote>\n<p>从 <code class="codespan">v5.0.0</code> 开始支持</p>\n</blockquote>\n\n\n<p>用于设置虚线的偏移量，可搭配 \n<code class="codespan">borderType</code>\n 指定 dash array 实现灵活的虚线效果。</p>\n<p>更多详情可以参考 MDN <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset" target="_blank">lineDashOffset</a>。</p>\n',
    uiControl: { type: "number", min: "0", step: "1", default: "0" },
  },
  "textStyle.rich.<style_name>.borderRadius": {
    desc: "\n\n<p>文字块的圆角。</p>\n",
    uiControl: { type: "vector", min: "0", dims: "LT,RT, RB, LB" },
  },
  "textStyle.rich.<style_name>.padding": {
    desc: '\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class="codespan">padding: [3, 4, 5, 6]</code>：表示 <code class="codespan">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class="codespan">padding: 4</code>：表示 <code class="codespan">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class="codespan">padding: [3, 4]</code>：表示 <code class="codespan">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class="codespan">width</code> 和 <code class="codespan">height</code> 指定的是内容高宽，不包含 <code class="codespan">padding</code>。</p>\n',
    uiControl: { type: "vector", min: "0", dims: "T,R,B,L" },
  },
  "textStyle.rich.<style_name>.shadowColor": {
    desc: "\n\n<p>文字块的背景阴影颜色。</p>\n",
    uiControl: { type: "color" },
  },
  "textStyle.rich.<style_name>.shadowBlur": {
    desc: "\n\n<p>文字块的背景阴影长度。</p>\n",
    uiControl: { type: "number", min: "0", step: "0.5" },
  },
  "textStyle.rich.<style_name>.shadowOffsetX": {
    desc: "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
    uiControl: { type: "number", step: "0.5" },
  },
  "textStyle.rich.<style_name>.shadowOffsetY": {
    desc: "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
    uiControl: { type: "number", step: "0.5" },
  },
  "textStyle.rich.<style_name>.width": {
    desc: '<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class="codespan">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class="codespan">width</code> 和 <code class="codespan">height</code> 指定的是内容高宽，不包含 <code class="codespan">padding</code>。</p>\n<p><code class="codespan">width</code> 也可以是百分比字符串，如 <code class="codespan">&#39;100%&#39;</code>。表示的是所在文本块的 <code class="codespan">contentWidth</code>（即不包含文本块的 <code class="codespan">padding</code>）的百分之多少。之所以以 <code class="codespan">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class="codespan">content box</code> 布局。如果以 <code class="codespan">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class="codespan">rich</code> 属性，则不能指定 <code class="codespan">width</code> 和 <code class="codespan">height</code>。</p>\n',
  },
  "textStyle.rich.<style_name>.height": {
    desc: '<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class="codespan">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class="codespan">width</code> 和 <code class="codespan">height</code> 指定的是内容高宽，不包含 <code class="codespan">padding</code>。</p>\n<p>注意，如果不定义 <code class="codespan">rich</code> 属性，则不能指定 <code class="codespan">width</code> 和 <code class="codespan">height</code>。</p>\n',
  },
  "textStyle.rich.<style_name>.textBorderColor": {
    desc: "\n\n<p>文字本身的描边颜色。</p>\n",
    uiControl: { type: "color" },
  },
  "textStyle.rich.<style_name>.textBorderWidth": {
    desc: "\n\n<p>文字本身的描边宽度。</p>\n",
    uiControl: { type: "number", min: "0", step: "0.5" },
  },
  "textStyle.rich.<style_name>.textBorderType": {
    desc: '\n\n\n<p>文字本身的描边类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;solid&#39;</code></li>\n<li><code class="codespan">&#39;dashed&#39;</code></li>\n<li><code class="codespan">&#39;dotted&#39;</code></li>\n</ul>\n<p>自 <code class="codespan">v5.0.0</code> 开始，也可以是 <code class="codespan">number</code> 或者 <code class="codespan">number</code> 数组，用以指定线条的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray" target="_blank">dash array</a>，配合 \n<code class="codespan">textBorderDashOffset</code>\n 可实现更灵活的虚线效果。</p>\n<p>例如：</p>\n<pre><code class="lang-ts">{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n</code></pre>\n',
    uiControl: {
      type: "enum",
      default: "solid",
      options: "solid,dashed,dotted",
    },
  },
  "textStyle.rich.<style_name>.textBorderDashOffset": {
    desc: '<blockquote>\n<p>从 <code class="codespan">v5.0.0</code> 开始支持</p>\n</blockquote>\n\n\n<p>用于设置虚线的偏移量，可搭配 \n<code class="codespan">textBorderType</code>\n 指定 dash array 实现灵活的虚线效果。</p>\n<p>更多详情可以参考 MDN <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset" target="_blank">lineDashOffset</a>。</p>\n',
    uiControl: { type: "number", min: "0", step: "1", default: "0" },
  },
  "textStyle.rich.<style_name>.textShadowColor": {
    desc: "\n\n<p>文字本身的阴影颜色。</p>\n",
    uiControl: { type: "color", default: "#000" },
  },
  "textStyle.rich.<style_name>.textShadowBlur": {
    desc: "\n\n<p>文字本身的阴影长度。</p>\n",
    uiControl: { type: "number", min: "0", step: "0.5" },
  },
  "textStyle.rich.<style_name>.textShadowOffsetX": {
    desc: "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
    uiControl: { type: "number", step: "0.5" },
  },
  "textStyle.rich.<style_name>.textShadowOffsetY": {
    desc: "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
    uiControl: { type: "number", step: "0.5" },
  },
  subtext: {
    desc: '\n\n<p>副标题文本，支持使用 <code class="codespan">\\n</code> 换行。</p>\n',
    uiControl: { type: "text" },
  },
  sublink: { desc: "<p>副标题文本超链接。</p>\n" },
  subtarget: {
    desc: '<p>指定窗口打开副标题超链接，可选：</p>\n<ul>\n<li><p><code class="codespan">&#39;self&#39;</code> 当前窗口打开</p>\n</li>\n<li><p><code class="codespan">&#39;blank&#39;</code> 新窗口打开</p>\n</li>\n</ul>\n',
  },
  "subtextStyle.color": {
    desc: "\n\n<p>副标题文字的颜色。</p>\n",
    uiControl: { type: "color", default: "'#aaa'" },
  },
  "subtextStyle.fontStyle": {
    desc: '\n\n<p>副标题文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;normal&#39;</code></li>\n<li><code class="codespan">&#39;italic&#39;</code></li>\n<li><code class="codespan">&#39;oblique&#39;</code></li>\n</ul>\n',
    uiControl: {
      type: "enum",
      default: "normal",
      options: "normal,italic,oblique",
    },
  },
  "subtextStyle.fontWeight": {
    desc: '\n\n<p>副标题文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;normal&#39;</code></li>\n<li><code class="codespan">&#39;bold&#39;</code></li>\n<li><code class="codespan">&#39;bolder&#39;</code></li>\n<li><code class="codespan">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n',
    uiControl: {
      type: "enum",
      default: "normal",
      options: "normal,bold,bolder,lighter",
    },
  },
  "subtextStyle.fontFamily": {
    desc: "\n\n<p>副标题文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
    uiControl: {
      type: "enum",
      default: "sans-serif",
      options: "sans-serif,serif,monospace,Arial,Courier New",
    },
  },
  "subtextStyle.fontSize": {
    desc: "\n\n<p>副标题文字的字体大小。</p>\n",
    uiControl: { type: "number", default: "12", min: "1", step: "1" },
  },
  "subtextStyle.align": {
    desc: '\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;left&#39;</code></li>\n<li><code class="codespan">&#39;center&#39;</code></li>\n<li><code class="codespan">&#39;right&#39;</code></li>\n</ul>\n<p><code class="codespan">rich</code> 中如果没有设置 <code class="codespan">align</code>，则会取父层级的 <code class="codespan">align</code>。例如：</p>\n<pre><code class="lang-ts">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`，则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n',
    uiControl: { type: "enum", options: "left,center,right" },
  },
  "subtextStyle.verticalAlign": {
    desc: '\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;top&#39;</code></li>\n<li><code class="codespan">&#39;middle&#39;</code></li>\n<li><code class="codespan">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class="codespan">rich</code> 中如果没有设置 <code class="codespan">verticalAlign</code>，则会取父层级的 <code class="codespan">verticalAlign</code>。例如：</p>\n<pre><code class="lang-ts">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n',
    uiControl: { type: "enum", options: "top,middle,bottom" },
  },
  "subtextStyle.lineHeight": {
    desc: '\n\n<p>行高。</p>\n<p><code class="codespan">rich</code> 中如果没有设置 <code class="codespan">lineHeight</code>，则会取父层级的 <code class="codespan">lineHeight</code>。例如：</p>\n<pre><code class="lang-ts">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n        }\n    }\n}\n</code></pre>\n',
    uiControl: { type: "number", min: "0", step: "1", default: "12" },
  },
  "subtextStyle.width": {
    desc: "\n\n<p>文本显示宽度。</p>\n",
    uiControl: {
      type: "number",
      default: "100",
      min: "1",
      max: "500",
      step: "1",
    },
  },
  "subtextStyle.height": {
    desc: "\n\n<p>文本显示高度。</p>\n",
    uiControl: {
      type: "number",
      default: "50",
      min: "1",
      max: "500",
      step: "1",
    },
  },
  "subtextStyle.textBorderColor": {
    desc: "\n\n<p>文字本身的描边颜色。</p>\n",
    uiControl: { type: "color" },
  },
  "subtextStyle.textBorderWidth": {
    desc: "\n\n<p>文字本身的描边宽度。</p>\n",
    uiControl: { type: "number", min: "0", step: "0.5" },
  },
  "subtextStyle.textBorderType": {
    desc: '\n\n\n<p>文字本身的描边类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;solid&#39;</code></li>\n<li><code class="codespan">&#39;dashed&#39;</code></li>\n<li><code class="codespan">&#39;dotted&#39;</code></li>\n</ul>\n<p>自 <code class="codespan">v5.0.0</code> 开始，也可以是 <code class="codespan">number</code> 或者 <code class="codespan">number</code> 数组，用以指定线条的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray" target="_blank">dash array</a>，配合 \n<code class="codespan">textBorderDashOffset</code>\n 可实现更灵活的虚线效果。</p>\n<p>例如：</p>\n<pre><code class="lang-ts">{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n</code></pre>\n',
    uiControl: {
      type: "enum",
      default: "solid",
      options: "solid,dashed,dotted",
    },
  },
  "subtextStyle.textBorderDashOffset": {
    desc: '<blockquote>\n<p>从 <code class="codespan">v5.0.0</code> 开始支持</p>\n</blockquote>\n\n\n<p>用于设置虚线的偏移量，可搭配 \n<code class="codespan">textBorderType</code>\n 指定 dash array 实现灵活的虚线效果。</p>\n<p>更多详情可以参考 MDN <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset" target="_blank">lineDashOffset</a>。</p>\n',
    uiControl: { type: "number", min: "0", step: "1", default: "0" },
  },
  "subtextStyle.textShadowColor": {
    desc: "\n\n<p>文字本身的阴影颜色。</p>\n",
    uiControl: { type: "color", default: "#000" },
  },
  "subtextStyle.textShadowBlur": {
    desc: "\n\n<p>文字本身的阴影长度。</p>\n",
    uiControl: { type: "number", min: "0", step: "0.5" },
  },
  "subtextStyle.textShadowOffsetX": {
    desc: "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
    uiControl: { type: "number", step: "0.5" },
  },
  "subtextStyle.textShadowOffsetY": {
    desc: "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
    uiControl: { type: "number", step: "0.5" },
  },
  "subtextStyle.overflow": {
    desc: '\n\n<p>文字超出宽度是否截断或者换行。配置<code class="codespan">width</code>时有效</p>\n<ul>\n<li><code class="codespan">&#39;truncate&#39;</code> 截断，并在末尾显示<code class="codespan">ellipsis</code>配置的文本，默认为<code class="codespan">...</code></li>\n<li><code class="codespan">&#39;break&#39;</code> 换行</li>\n<li><code class="codespan">&#39;breakAll&#39;</code> 换行，跟<code class="codespan">&#39;break&#39;</code>不同的是，在英语等拉丁文中，<code class="codespan">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n',
    uiControl: { type: "enum", options: "truncate,break,breakAll" },
  },
  "subtextStyle.ellipsis": {
    desc: '<p>在<code class="codespan">overflow</code>配置为<code class="codespan">&#39;truncate&#39;</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n',
  },
  "subtextStyle.rich": {
    desc: '<p>在 <code class="codespan">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class="lang-ts">label: {\n    // 在文本中，可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号：\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意，换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<p>详情参见教程：<a href="tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE" target="_blank">富文本标签</a></p>\n',
  },
  "subtextStyle.rich.<style_name>.color": {
    desc: "\n\n<p>文字的颜色。</p>\n",
    uiControl: { type: "color", default: "null" },
  },
  "subtextStyle.rich.<style_name>.fontStyle": {
    desc: '\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;normal&#39;</code></li>\n<li><code class="codespan">&#39;italic&#39;</code></li>\n<li><code class="codespan">&#39;oblique&#39;</code></li>\n</ul>\n',
    uiControl: {
      type: "enum",
      default: "normal",
      options: "normal,italic,oblique",
    },
  },
  "subtextStyle.rich.<style_name>.fontWeight": {
    desc: '\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;normal&#39;</code></li>\n<li><code class="codespan">&#39;bold&#39;</code></li>\n<li><code class="codespan">&#39;bolder&#39;</code></li>\n<li><code class="codespan">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n',
    uiControl: {
      type: "enum",
      default: "normal",
      options: "normal,bold,bolder,lighter",
    },
  },
  "subtextStyle.rich.<style_name>.fontFamily": {
    desc: "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
    uiControl: {
      type: "enum",
      default: "sans-serif",
      options: "sans-serif,serif,monospace,Arial,Courier New",
    },
  },
  "subtextStyle.rich.<style_name>.fontSize": {
    desc: "\n\n<p>文字的字体大小。</p>\n",
    uiControl: { type: "number", default: "12", min: "1", step: "1" },
  },
  "subtextStyle.rich.<style_name>.align": {
    desc: '\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;left&#39;</code></li>\n<li><code class="codespan">&#39;center&#39;</code></li>\n<li><code class="codespan">&#39;right&#39;</code></li>\n</ul>\n<p><code class="codespan">rich</code> 中如果没有设置 <code class="codespan">align</code>，则会取父层级的 <code class="codespan">align</code>。例如：</p>\n<pre><code class="lang-ts">{\n    align: right,\n    rich: {\n        a: {\n            // 没有设置 `align`，则 `align` 为 right\n        }\n    }\n}\n</code></pre>\n',
    uiControl: { type: "enum", options: "left,center,right" },
  },
  "subtextStyle.rich.<style_name>.verticalAlign": {
    desc: '\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;top&#39;</code></li>\n<li><code class="codespan">&#39;middle&#39;</code></li>\n<li><code class="codespan">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class="codespan">rich</code> 中如果没有设置 <code class="codespan">verticalAlign</code>，则会取父层级的 <code class="codespan">verticalAlign</code>。例如：</p>\n<pre><code class="lang-ts">{\n    verticalAlign: bottom,\n    rich: {\n        a: {\n            // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n        }\n    }\n}\n</code></pre>\n',
    uiControl: { type: "enum", options: "top,middle,bottom" },
  },
  "subtextStyle.rich.<style_name>.lineHeight": {
    desc: '\n\n<p>行高。</p>\n<p><code class="codespan">rich</code> 中如果没有设置 <code class="codespan">lineHeight</code>，则会取父层级的 <code class="codespan">lineHeight</code>。例如：</p>\n<pre><code class="lang-ts">{\n    lineHeight: 56,\n    rich: {\n        a: {\n            // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n        }\n    }\n}\n</code></pre>\n',
    uiControl: { type: "number", min: "0", step: "1", default: "12" },
  },
  "subtextStyle.rich.<style_name>.backgroundColor": {
    desc: '\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class="codespan">&#39;#123234&#39;</code>, <code class="codespan">&#39;red&#39;</code>, <code class="codespan">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class="lang-ts">backgroundColor: {\n    image: &#39;xxx/xxx.png&#39;\n    // 这里可以是图片的 URL，\n    // 或者图片的 dataURI，\n    // 或者 HTMLImageElement 对象，\n    // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class="codespan">width</code> 或 <code class="codespan">height</code> 指定高宽，也可以不指定自适应。</p>\n',
    uiControl: { type: "color", default: "#fff" },
  },
  "subtextStyle.rich.<style_name>.borderColor": {
    desc: "\n\n<p>文字块边框颜色。</p>\n",
    uiControl: { type: "color", default: "#fff" },
  },
  "subtextStyle.rich.<style_name>.borderWidth": {
    desc: "\n\n<p>文字块边框宽度。</p>\n",
    uiControl: { type: "number", min: "0", step: "0.5" },
  },
  "subtextStyle.rich.<style_name>.borderType": {
    desc: '\n\n\n<p>文字块边框描边类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;solid&#39;</code></li>\n<li><code class="codespan">&#39;dashed&#39;</code></li>\n<li><code class="codespan">&#39;dotted&#39;</code></li>\n</ul>\n<p>自 <code class="codespan">v5.0.0</code> 开始，也可以是 <code class="codespan">number</code> 或者 <code class="codespan">number</code> 数组，用以指定线条的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray" target="_blank">dash array</a>，配合 \n<code class="codespan">borderDashOffset</code>\n 可实现更灵活的虚线效果。</p>\n<p>例如：</p>\n<pre><code class="lang-ts">{\n\nborderType: [5, 10],\n\nborderDashOffset: 5\n}\n</code></pre>\n',
    uiControl: {
      type: "enum",
      default: "solid",
      options: "solid,dashed,dotted",
    },
  },
  "subtextStyle.rich.<style_name>.borderDashOffset": {
    desc: '<blockquote>\n<p>从 <code class="codespan">v5.0.0</code> 开始支持</p>\n</blockquote>\n\n\n<p>用于设置虚线的偏移量，可搭配 \n<code class="codespan">borderType</code>\n 指定 dash array 实现灵活的虚线效果。</p>\n<p>更多详情可以参考 MDN <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset" target="_blank">lineDashOffset</a>。</p>\n',
    uiControl: { type: "number", min: "0", step: "1", default: "0" },
  },
  "subtextStyle.rich.<style_name>.borderRadius": {
    desc: "\n\n<p>文字块的圆角。</p>\n",
    uiControl: { type: "vector", min: "0", dims: "LT,RT, RB, LB" },
  },
  "subtextStyle.rich.<style_name>.padding": {
    desc: '\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class="codespan">padding: [3, 4, 5, 6]</code>：表示 <code class="codespan">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class="codespan">padding: 4</code>：表示 <code class="codespan">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class="codespan">padding: [3, 4]</code>：表示 <code class="codespan">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class="codespan">width</code> 和 <code class="codespan">height</code> 指定的是内容高宽，不包含 <code class="codespan">padding</code>。</p>\n',
    uiControl: { type: "vector", min: "0", dims: "T,R,B,L" },
  },
  "subtextStyle.rich.<style_name>.shadowColor": {
    desc: "\n\n<p>文字块的背景阴影颜色。</p>\n",
    uiControl: { type: "color" },
  },
  "subtextStyle.rich.<style_name>.shadowBlur": {
    desc: "\n\n<p>文字块的背景阴影长度。</p>\n",
    uiControl: { type: "number", min: "0", step: "0.5" },
  },
  "subtextStyle.rich.<style_name>.shadowOffsetX": {
    desc: "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
    uiControl: { type: "number", step: "0.5" },
  },
  "subtextStyle.rich.<style_name>.shadowOffsetY": {
    desc: "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
    uiControl: { type: "number", step: "0.5" },
  },
  "subtextStyle.rich.<style_name>.width": {
    desc: '<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class="codespan">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class="codespan">width</code> 和 <code class="codespan">height</code> 指定的是内容高宽，不包含 <code class="codespan">padding</code>。</p>\n<p><code class="codespan">width</code> 也可以是百分比字符串，如 <code class="codespan">&#39;100%&#39;</code>。表示的是所在文本块的 <code class="codespan">contentWidth</code>（即不包含文本块的 <code class="codespan">padding</code>）的百分之多少。之所以以 <code class="codespan">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class="codespan">content box</code> 布局。如果以 <code class="codespan">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class="codespan">rich</code> 属性，则不能指定 <code class="codespan">width</code> 和 <code class="codespan">height</code>。</p>\n',
  },
  "subtextStyle.rich.<style_name>.height": {
    desc: '<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class="codespan">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class="codespan">width</code> 和 <code class="codespan">height</code> 指定的是内容高宽，不包含 <code class="codespan">padding</code>。</p>\n<p>注意，如果不定义 <code class="codespan">rich</code> 属性，则不能指定 <code class="codespan">width</code> 和 <code class="codespan">height</code>。</p>\n',
  },
  "subtextStyle.rich.<style_name>.textBorderColor": {
    desc: "\n\n<p>文字本身的描边颜色。</p>\n",
    uiControl: { type: "color" },
  },
  "subtextStyle.rich.<style_name>.textBorderWidth": {
    desc: "\n\n<p>文字本身的描边宽度。</p>\n",
    uiControl: { type: "number", min: "0", step: "0.5" },
  },
  "subtextStyle.rich.<style_name>.textBorderType": {
    desc: '\n\n\n<p>文字本身的描边类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class="codespan">&#39;solid&#39;</code></li>\n<li><code class="codespan">&#39;dashed&#39;</code></li>\n<li><code class="codespan">&#39;dotted&#39;</code></li>\n</ul>\n<p>自 <code class="codespan">v5.0.0</code> 开始，也可以是 <code class="codespan">number</code> 或者 <code class="codespan">number</code> 数组，用以指定线条的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray" target="_blank">dash array</a>，配合 \n<code class="codespan">textBorderDashOffset</code>\n 可实现更灵活的虚线效果。</p>\n<p>例如：</p>\n<pre><code class="lang-ts">{\n\ntextBorderType: [5, 10],\n\ntextBorderDashOffset: 5\n}\n</code></pre>\n',
    uiControl: {
      type: "enum",
      default: "solid",
      options: "solid,dashed,dotted",
    },
  },
  "subtextStyle.rich.<style_name>.textBorderDashOffset": {
    desc: '<blockquote>\n<p>从 <code class="codespan">v5.0.0</code> 开始支持</p>\n</blockquote>\n\n\n<p>用于设置虚线的偏移量，可搭配 \n<code class="codespan">textBorderType</code>\n 指定 dash array 实现灵活的虚线效果。</p>\n<p>更多详情可以参考 MDN <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset" target="_blank">lineDashOffset</a>。</p>\n',
    uiControl: { type: "number", min: "0", step: "1", default: "0" },
  },
  "subtextStyle.rich.<style_name>.textShadowColor": {
    desc: "\n\n<p>文字本身的阴影颜色。</p>\n",
    uiControl: { type: "color", default: "#000" },
  },
  "subtextStyle.rich.<style_name>.textShadowBlur": {
    desc: "\n\n<p>文字本身的阴影长度。</p>\n",
    uiControl: { type: "number", min: "0", step: "0.5" },
  },
  "subtextStyle.rich.<style_name>.textShadowOffsetX": {
    desc: "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
    uiControl: { type: "number", step: "0.5" },
  },
  "subtextStyle.rich.<style_name>.textShadowOffsetY": {
    desc: "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
    uiControl: { type: "number", step: "0.5" },
  },
  textAlign: {
    desc: '\n\n<p>整体（包括 text 和 subtext）的水平对齐。</p>\n<p>可选值：<code class="codespan">&#39;auto&#39;</code>、<code class="codespan">&#39;left&#39;</code>、<code class="codespan">&#39;right&#39;</code>、<code class="codespan">&#39;center&#39;</code>。</p>\n',
    uiControl: {
      type: "enum",
      options: "auto,left,center,right",
      default: "auto",
    },
  },
  textVerticalAlign: {
    desc: '\n\n<p>整体（包括 text 和 subtext）的垂直对齐。</p>\n<p>可选值：<code class="codespan">&#39;auto&#39;</code>、<code class="codespan">&#39;top&#39;</code>、<code class="codespan">&#39;bottom&#39;</code>、<code class="codespan">&#39;middle&#39;</code>。</p>\n',
    uiControl: {
      type: "enum",
      options: "auto,top,middle,bottom",
      default: "auto",
    },
  },
  triggerEvent: { desc: "<p>是否触发事件。</p>\n" },
  padding: {
    desc: '\n\n<p>标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。</p>\n<p>使用示例：</p>\n<pre><code class="lang-ts">// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5，左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n    5,  // 上\n    10, // 右\n    5,  // 下\n    10, // 左\n]\n</code></pre>\n',
    uiControl: { type: "vector", min: "0", dims: "T,R,B,L" },
  },
  itemGap: {
    desc: "\n\n<p>主副标题之间的间距。</p>\n",
    uiControl: { type: "number", min: "0", default: "10", step: "1" },
  },
  zlevel: {
    desc: '<p>所有图形的 zlevel 值。</p>\n<p><code class="codespan">zlevel</code>用于 Canvas 分层，不同<code class="codespan">zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code class="codespan">zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code class="codespan">zlevel</code> 大的 Canvas 会放在 <code class="codespan">zlevel</code> 小的 Canvas 的上面。</p>\n',
  },
  z: {
    desc: '<p>组件的所有图形的<code class="codespan">z</code>值。控制图形的前后顺序。<code class="codespan">z</code>值小的图形会被<code class="codespan">z</code>值大的图形覆盖。</p>\n<p><code class="codespan">z</code>相比<code class="codespan">zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>\n',
  },
  left: {
    desc: '\n\n<p>title 组件离容器左侧的距离。</p>\n<p><code class="codespan">left</code> 的值可以是像 <code class="codespan">20</code> 这样的具体像素值，可以是像 <code class="codespan">&#39;20%&#39;</code> 这样相对于容器高宽的百分比，也可以是 <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, <code class="codespan">&#39;right&#39;</code>。</p>\n<p>如果 <code class="codespan">left</code> 的值为 <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, <code class="codespan">&#39;right&#39;</code>，组件会根据相应的位置自动对齐。</p>\n',
    uiControl: { type: "percent", default: "0%" },
  },
  top: {
    desc: '\n\n<p>title 组件离容器上侧的距离。</p>\n<p><code class="codespan">top</code> 的值可以是像 <code class="codespan">20</code> 这样的具体像素值，可以是像 <code class="codespan">&#39;20%&#39;</code> 这样相对于容器高宽的百分比，也可以是 <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, <code class="codespan">&#39;bottom&#39;</code>。</p>\n<p>如果 <code class="codespan">top</code> 的值为 <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, <code class="codespan">&#39;bottom&#39;</code>，组件会根据相应的位置自动对齐。</p>\n',
    uiControl: { type: "percent", default: "0%" },
  },
  right: {
    desc: '\n\n<p>title 组件离容器右侧的距离。</p>\n<p><code class="codespan">right</code> 的值可以是像 <code class="codespan">20</code> 这样的具体像素值，可以是像 <code class="codespan">&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n',
    uiControl: { type: "percent", default: "0%" },
  },
  bottom: {
    desc: '\n\n<p>title 组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code class="codespan">20</code> 这样的具体像素值，可以是像 <code class="codespan">&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n',
    uiControl: { type: "percent", default: "0%" },
  },
  backgroundColor: {
    desc: '\n\n<p>标题背景色，默认透明。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class="codespan">&#39;rgb(128, 128, 128)&#39;</code>   ，如果想要加上 alpha 通道，可以使用 RGBA，比如 <code class="codespan">&#39;rgba(128, 128, 128, 0.5)&#39;</code>，也可以使用十六进制格式，比如 <code class="codespan">&#39;#ccc&#39;</code></p>\n</blockquote>\n',
    uiControl: { type: "color" },
  },
  borderColor: {
    desc: "\n\n<p>标题的边框颜色。支持的颜色格式同 backgroundColor。</p>\n",
    uiControl: { type: "color", default: "#ccc" },
  },
  borderWidth: {
    desc: "\n\n<p>标题的边框线宽。</p>\n",
    uiControl: { type: "number", default: "0", min: "0", step: "0.5" },
  },
  borderRadius: {
    desc: "\n\n<p>圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。\n如:</p>\n<pre><code>borderRadius: 5, // 统一设置四个角的圆角大小\nborderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）\n</code></pre>",
    uiControl: { type: "vector", min: "0", dims: "LT,RT,RB,LB" },
  },
  shadowBlur: {
    desc: '\n\n<p>图形阴影的模糊大小。该属性配合 <code class="codespan">shadowColor</code>,<code class="codespan">shadowOffsetX</code>, <code class="codespan">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class="lang-ts">{\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n    shadowBlur: 10\n}\n</code></pre>\n<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code class="codespan">show: true</code> 以及值不为 <code class="codespan">tranparent</code> 的背景色 <code class="codespan">backgroundColor</code>。</p>\n',
    uiControl: { type: "number", default: "", min: "0", step: "0.5" },
  },
  shadowColor: {
    desc: '\n\n<p>阴影颜色。支持的格式同<code class="codespan">color</code>。</p>\n<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code class="codespan">show: true</code>。</p>\n',
    uiControl: { type: "color", default: "" },
  },
  shadowOffsetX: {
    desc: '\n\n<p>阴影水平方向上的偏移距离。</p>\n<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code class="codespan">show: true</code>。</p>\n',
    uiControl: { type: "number", default: "0", step: "0.5" },
  },
  shadowOffsetY: {
    desc: '\n\n<p>阴影垂直方向上的偏移距离。</p>\n<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code class="codespan">show: true</code>。</p>\n',
    uiControl: { type: "number", default: "0", step: "0.5" },
  },
};
